<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>TaskGo</title>
    
    <!-- PWA 配置 -->
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#2563eb">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="TaskGo">
    <meta name="msapplication-TileColor" content="#2563eb">
    <meta name="msapplication-config" content="/static/icons/browserconfig.xml">
    
    <!-- 图标配置 -->
    <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
    <link rel="shortcut icon" href="/static/favicon.ico">
    
    <!-- 样式和脚本 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/tailwind_config.js"></script>
    <link rel="stylesheet" href="/static/css/theme.css">
</head>
<body class="bg-background dark:bg-background-dark text-gray-800 dark:text-secondary-200 antialiased">
    <!-- 登录/注册界面 -->
    <div id="auth-container" class="min-h-[100dvh] flex items-center justify-center bg-background p-4">
        <div class="w-full max-w-sm">
            <!-- 登录表单 -->
            <div id="login-view" class="bg-surface p-8 rounded-lg shadow-sm border border-border">
                <h2 class="text-2xl font-medium mb-6 text-center">Welcome to TaskGo</h2>
                <form id="login-form" class="space-y-4">
                    <div>
                        <input type="text" id="login-username" placeholder="Username" required 
                               class="w-full px-4 py-2 rounded-lg border border-border bg-background focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                    </div>
                    <div>
                        <input type="password" id="login-password" placeholder="Password" required 
                               class="w-full px-4 py-2 rounded-lg border border-border bg-background focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                    </div>
                    <div class="space-y-2 text-sm py-1">
                        <div class="flex items-center">
                            <input type="checkbox" id="remember-username" class="mr-2 h-4 w-4 rounded border-border text-primary focus:ring-primary">
                            <label for="remember-username" class="text-secondary">Remember Username</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="remember-password" class="mr-2 h-4 w-4 rounded border-border text-primary focus:ring-primary">
                            <label for="remember-password" class="text-secondary">Remember Password</label>
                        </div>
                    </div>
                    <button type="submit" 
                            class="w-full bg-primary text-white py-2 rounded-lg hover:bg-primary/90 transition-colors">
                        Sign In
                    </button>
                </form>
                <p class="mt-4 text-sm text-center text-secondary">
                    New to TaskGo? 
                    <a href="#" id="show-register" class="text-primary hover:underline">Create an account</a>
                </p>
            </div>

            <!-- 注册表单 -->
            <div id="register-view" class="hidden bg-surface p-8 rounded-lg shadow-sm border border-border">
                <h2 class="text-2xl font-medium mb-6 text-center">Create Account</h2>
                <form id="register-form" class="space-y-4">
                    <div>
                        <input type="text" id="register-username" placeholder="Username" required 
                               class="w-full px-4 py-2 rounded-lg border border-border bg-background focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                    </div>
                    <div>
                        <input type="password" id="register-password" placeholder="Password" required 
                               class="w-full px-4 py-2 rounded-lg border border-border bg-background focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                    </div>
                    <button type="submit" 
                            class="w-full bg-primary text-white py-2 rounded-lg hover:bg-primary/90 transition-colors">
                        Create Account
                    </button>
                </form>
                <p class="mt-4 text-sm text-center text-secondary">
                    Already have an account? 
                    <a href="#" id="show-login" class="text-primary hover:underline">Sign in</a>
                </p>
            </div>
        </div>
    </div>

    <!-- 主应用界面 -->
    <div id="app-container" class="hidden min-h-[100dvh]">
        <!-- 移动端导航栏 -->
        <nav class="lg:hidden fixed top-0 left-0 right-0 bg-surface dark:bg-surface-dark border-b border-border dark:border-border-dark z-30">
            <div class="flex items-center justify-between p-4">
                <div class="flex items-center space-x-3">
                    <button id="mobile-sidebar-toggle" class="text-secondary hover:text-gray-700 focus:outline-none" aria-label="Toggle Sidebar">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                    <div class="flex items-center space-x-2">
                        <img id="mobile-logo" src="/static/icons/logo.png" alt="Logo" class="h-8 w-8 cursor-pointer">
                        <h1 class="text-xl font-semibold">TaskGo</h1>
                    </div>
                </div>
                <!-- 移动端搜索栏 -->
                    <div class="flex items-center space-x-2">
                    <div class="relative w-40">
                        <input type="text" id="mobile-search-input" placeholder="Search Tasks ..." 
                               class="w-full px-3 py-1.5 text-base bg-background dark:bg-background-dark border border-border dark:border-border-dark rounded-lg 
                                      focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                        <button id="mobile-search-clear-btn" class="hidden absolute right-8 top-1/2 -translate-y-1/2 text-secondary hover:text-primary" aria-label="Clear input">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                        <svg class="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </div>
                    
                </div>
            </div>
        </nav>

        <!-- 侧边栏遮罩层 -->
        <div class="sidebar-overlay fixed inset-0 bg-black/50 z-40 hidden lg:hidden"></div>
        
        <!-- 侧边栏 -->
        <aside id="sidebar" class="fixed lg:sticky top-0 left-0 h-[100dvh] w-64 bg-surface dark:bg-surface-dark border-r border-border dark:border-border-dark flex flex-col z-50 transform -translate-x-full lg:translate-x-0 transition-all duration-300 ease-in-out">
            <!-- 折叠按钮 -->
            <button id="sidebar-collapse-btn" class="absolute -right-3 top-4 w-6 h-6 bg-surface border border-border rounded-full text-secondary hover:text-gray-700 focus:outline-none shadow-sm hidden lg:flex items-center justify-center cursor-pointer transform transition-transform hover:scale-110 z-10">
                <svg class="sidebar-collapse-icon w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            
                <div class="p-4 border-b border-border min-h-[60px] flex items-center relative">
                <div id="user-profile" class="flex items-center justify-between w-full cursor-pointer group">
                    <div class="relative" title="Click to expand">
                        <img src="/static/icons/avatar.png" alt="Avatar" id="user-avatar" 
                             class="w-8 h-8 rounded-full border border-border hover:ring-2 hover:ring-primary/20 transition-all">
                        <span class="absolute -bottom-1 -right-1 w-3 h-3 bg-success rounded-full border-2 border-white"></span>
                    </div>
                    <div id="user-info" class="flex-1 sidebar-full">
                        <span id="username-display" class="font-medium"></span>
                        <div id="user-stats" class="mt-1 ml-3 flex items-center space-x-3">
                            <div class="flex items-center space-x-1 text-secondary">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
                                <span id="total-count">0</span>
                            </div>
                            <div class="flex items-center space-x-1 text-secondary">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
                                <span id="completed-count">0</span>
                            </div>
                        </div>
                    </div>
                    <button id="desktop-sidebar-toggle" class="lg:hidden text-secondary hover:text-gray-700 focus:outline-none">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div id="user-menu" class="hidden absolute top-14 left-4 bg-surface dark:bg-surface-dark border border-border dark:border-border-dark rounded-lg shadow-sm p-2"></div>
                </div>
            <div class="flex-1 min-h-0 overflow-y-auto flex flex-col">
                <!-- 导航部分 -->
                <div class="p-4 border-b border-border">
                    <ul id="main-nav-list" class="space-y-1 mt-2">
                        <li id="all-tasks-nav" class="flex items-center px-2 py-1 rounded-md hover:bg-gray-100 active:scale-95 transition-transform cursor-pointer">
                            <div class="flex items-center space-x-2">
                                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                                </svg>
                                <span class="text-sm font-medium sidebar-full">All Tasks</span>
                            </div>
                        </li>                        
                        <li id="favorites-nav" class="flex items-center px-2 py-1 rounded-md hover:bg-gray-100 active:scale-95 transition-transform cursor-pointer">
                            <div class="flex items-center space-x-2">
                                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                                </svg>
                                <span class="text-sm font-medium sidebar-full">Favorites</span>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <!-- 标签部分 -->
                <div class="p-4 flex-1 min-h-0 flex flex-col">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2">
                            <svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                            </svg>
                            <h2 class="text-sm font-medium text-secondary sidebar-full">Tags</h2>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button id="toggle-tags-btn" class="p-1 text-secondary hover:text-primary hover:bg-background dark:hover:bg-background-dark rounded transition-colors" title="Collapse/Expand" aria-label="Collapse/Expand" aria-expanded="true">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                </svg>
                            </button>
                        <button id="add-tag-btn" class="sidebar-full p-1 text-secondary hover:text-primary hover:bg-background rounded transition-colors" title="Add new tag">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                            </svg>
                        </button>
                        </div>
                    </div>
                    <div id="tags-content" class="mt-2 flex-1 min-h-0">
                        <ul id="tag-list" class="space-y-1 tag-scroll h-full overflow-y-auto pr-1"></ul>
                    </div>
                </div>
            </div>
            <div class="p-4 border-t border-border sidebar-full">
                <div class="flex space-x-2">
                    <a href="/settings" target="_self" id="settings-btn" class="text-sm text-secondary hover:text-gray-700 active:scale-95 transition-transform">Settings</a>
                    <span class="text-border">|</span>
                    <a href="#" id="logout-link" class="text-sm text-secondary hover:text-gray-700 active:scale-95 transition-transform">Logout</a>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <div class="flex min-h-[100dvh] w-full justify-center">
            <div class="flex-1 flex flex-col bg-background transition-[margin] duration-300 sidebar-adjusted w-full" data-expanded-margin="" data-collapsed-margin="">
                <!-- 桌面端顶部栏 -->
                <header class="hidden lg:block sticky top-0 z-30 bg-surface dark:bg-surface-dark border-b border-border dark:border-border-dark p-4">
                    <div class="flex items-center justify-between w-full max-w-screen-xl mx-auto">
                        <div class="flex items-center space-x-3">
                            <img id="desktop-logo" src="/static/icons/logo.png" alt="Logo" class="h-8 w-8 cursor-pointer">
                            <h1 class="text-xl font-semibold">TaskGo</h1>
                        </div>
                        <div class="w-72 flex items-center justify-end space-x-3">
                            <div class="relative">
                                <input type="text" id="search-input" placeholder="Search Tasks ..." 
                                       class="w-full px-4 py-2 bg-background dark:bg-background-dark border border-border dark:border-border-dark rounded-lg 
                                              focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                                <button id="search-clear-btn" class="hidden absolute right-9 top-1/2 -translate-y-1/2 text-secondary hover:text-primary" aria-label="Clear input">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                                <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                </svg>
                            </div>
                            
                        </div>
                    </div>
                </header>

            <!-- 主要内容 -->
            <main class="flex-1 overflow-y-auto pt-[104px] lg:pt-0 pb-[92px] lg:pb-4 flex flex-col w-full max-w-screen-xl mx-auto">
                <div class="w-full max-w-screen-xl mx-auto p-2 flex-1 flex flex-col">
                    <!-- 桌面端任务输入框 -->
                    <form id="task-form" class="mb-6 hidden lg:block">
                        <div class="relative">
                            <textarea id="task-input" placeholder="#tag1 #tag2 New task..." 
                                   class="w-full px-4 py-3 bg-surface dark:bg-surface-dark border-2 border-border dark:border-border-dark rounded-lg resize-none overflow-hidden min-h-[48px] max-h-[200px]
                                          focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/30 shadow-sm"
                                   rows="1"
                                   autocomplete="off"></textarea>
                            <!-- 图片上传按钮 -->
                            <div class="absolute right-12 bottom-3 flex items-center space-x-2">
                                <button type="button" id="image-upload-btn" class="text-secondary hover:text-primary transition-colors" title="上传图片" aria-label="Upload image">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </button>
                                <input type="file" id="image-upload-input" multiple accept="image/*" class="hidden">
                            </div>
                            <button type="submit" class="absolute right-3 bottom-3 text-primary hover:text-primary/90 transition-all" aria-label="Create task">
                                <svg class="w-6 h-6 transform rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                                </svg>
                            </button>
                        </div>
                        <!-- 图片预览区域 -->
                        <div id="image-preview-container" class="hidden mt-3 p-3 bg-background dark:bg-background-dark border border-border dark:border-border-dark rounded-lg">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm text-secondary">已选择的图片</span>
                                <button type="button" id="clear-images-btn" class="text-xs text-red-500 hover:text-red-700">清除所有</button>
                            </div>
                            <div id="image-preview-list" class="flex flex-wrap gap-2"></div>
                        </div>
                        <div id="tag-autocomplete-container" class="hidden absolute mt-1 w-full bg-surface border border-border rounded-lg shadow-lg z-50"></div>
                    </form>
                    
                    <!-- 移动端任务输入框（固定在底部） -->
                    <form id="mobile-task-form" class="fixed bottom-0 left-0 right-0 p-4 bg-surface dark:bg-surface-dark border-t border-border dark:border-border-dark shadow-lg lg:hidden z-30 safe-bottom" role="form" aria-label="Mobile task form">
                        <div class="relative max-w-screen-xl mx-auto">
                            <textarea id="mobile-task-input" placeholder="#tag1 #tag2 New task..." 
                                   class="w-full px-4 py-3 bg-background dark:bg-background-dark border-2 border-border dark:border-border-dark rounded-lg resize-none overflow-hidden min-h-[48px] max-h-[200px]
                                          focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/30 shadow-sm"
                                   rows="1"
                                   autocomplete="off"></textarea>
                            <!-- 移动端图片上传按钮 -->
                            <div class="absolute right-12 bottom-3 flex items-center space-x-2">
                                <button type="button" id="mobile-image-upload-btn" class="text-secondary hover:text-primary transition-colors" title="上传图片" aria-label="Upload image">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </button>
                                <input type="file" id="mobile-image-upload-input" multiple accept="image/*" class="hidden">
                            </div>
                            <button type="submit" class="absolute right-3 bottom-3 text-primary hover:text-primary/90 transition-all" aria-label="Create task">
                                <svg class="w-6 h-6 transform rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                                </svg>
                            </button>
                        </div>
                        <!-- 移动端图片预览区域 -->
                        <div id="mobile-image-preview-container" class="hidden mt-3 p-3 bg-background dark:bg-background-dark border border-border dark:border-border-dark rounded-lg max-w-screen-xl mx-auto">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm text-secondary">Selected pictures</span>
                                <button type="button" id="mobile-clear-images-btn" class="text-xs text-red-500 hover:text-red-700">Clear All</button>
                            </div>
                            <div id="mobile-image-preview-list" class="flex flex-wrap gap-2"></div>
                        </div>
                        <div id="mobile-tag-autocomplete-container" class="hidden absolute bottom-[64px] left-0 right-0 mx-3 bg-surface border border-border rounded-lg shadow-lg z-50"></div>
                    </form>

                    <!-- 任务列表 -->
                    <div id="tasks-container" class="space-y-6 min-h-[calc(100dvh-13rem)] flex-1">
                        <!-- 合并的任务列表 -->
                        <section id="tasks-section" class="bg-surface dark:bg-surface-dark rounded-xl shadow-sm border border-border/50 dark:border-border-dark overflow-hidden flex-1 min-h-[20rem]" role="region" aria-label="Tasks section">
                            <!-- 待办任务标题 -->
                            <div class="flex items-center justify-between p-4 border-b border-border dark:border-border-dark bg-background/50 dark:bg-background-dark/50">
                                <div class="flex items-center space-x-2">
                                    <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                    </svg>
                                    <h2 class="text-lg font-medium">Tasks</h2>
                                </div>
                            </div>
                            <!-- 待办任务列表 -->
                            <div>
                                <ul id="todo-list" class="min-h-[10rem] p-1"></ul>
                            </div>
                            
                            <!-- 已完成任务标题 -->
                            <div class="flex items-center justify-between p-4 border-t border-b border-border dark:border-border-dark bg-background/50 dark:bg-background-dark/50">
                                <div class="flex items-center space-x-2">
                                    <svg class="w-5 h-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <h2 class="text-lg font-medium">Completed</h2>
                                </div>
                            </div>
                            <!-- 已完成任务列表 -->
                            <div>
                                <ul id="completed-list" class="p-1"></ul>
                            </div>
                            <!-- 显示更多按钮 -->
                            <div class="p-4 bg-background/50 dark:bg-background-dark/50 border-t border-border dark:border-border-dark">
                                <button id="show-more-btn" class="hidden w-full py-2 text-sm text-secondary hover:text-primary focus:outline-none transition-colors">
                                    Show more
                                </button>
                            </div>
                        </section>
                    </div>
                    <button id="scroll-to-top-btn" class="hidden fixed bottom-6 right-6 z-40 bg-primary text-white rounded-full w-10 h-10 shadow-lg hover:bg-primary/90 focus:outline-none" aria-label="Scroll to top" title="返回顶部">
                        <svg class="w-6 h-6 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7 7 7M12 3v18" />
                        </svg>
                    </button>
                </div>
            </main>
        </div>
    </div>

    <!-- 标签操作菜单 -->
    <div id="tag-menu" class="hidden fixed z-50">
        <div class="bg-surface dark:bg-surface-dark rounded-lg shadow-lg border border-border dark:border-border-dark w-48 py-1">
            <button id="edit-tag-btn" class="w-full px-4 py-2 text-left text-sm hover:bg-background dark:hover:bg-background-dark flex items-center space-x-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
                <span>Edit Tag</span>
            </button>
            <button id="delete-tag-btn" class="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-background dark:hover:bg-background-dark flex items-center space-x-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
                <span>Delete Tag</span>
            </button>
        </div>
    </div>

    <!-- 标签编辑模态框 -->
    <div id="edit-tag-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
        <div class="bg-surface dark:bg-surface-dark rounded-lg shadow-xl max-w-sm w-full p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-medium">Edit Tag</h2>
                <button class="close-modal-btn text-secondary hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <form id="edit-tag-form" class="space-y-4">
                <div>
                    <input type="text" id="edit-tag-input" placeholder="Enter new tag name" required
                           class="w-full px-4 py-2 bg-background dark:bg-background-dark border border-border dark:border-border-dark rounded-lg
                                  focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                <div class="flex space-x-3">
                    <button type="submit"
                            class="flex-1 bg-primary text-white py-2 rounded-lg hover:bg-primary/90 transition-colors">
                        Save
                    </button>
                    <button type="button" class="close-modal-btn flex-1 bg-background dark:bg-background-dark border border-border dark:border-border-dark text-secondary py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div id="settings-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4">
        <div class="bg-surface dark:bg-surface-dark rounded-lg shadow-xl max-w-md w-full">
            <div class="p-6">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center space-x-2">
                        <button id="settings-back-btn" class="p-2 rounded-lg border border-border dark:border-border-dark text-secondary hover:text-primary transition-colors" aria-label="Back to main" title="Back">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                            </svg>
                        </button>
                        <h2 class="text-xl font-medium">Settings</h2>
                    </div>
                    <button class="close-btn text-secondary hover:text-gray-700">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <!-- 头像设置 -->
                <form id="avatar-form" class="mb-6">
                    <h3 class="text-sm font-medium text-secondary mb-2">AVATAR</h3>
                    <div class="flex items-center space-x-4">
                        <img src="/static/icons/avatar.png" alt="Current avatar" class="w-16 h-16 rounded-full border border-border dark:border-border-dark">
                        <div>
                            <input type="file" id="avatar-input" accept="image/*" class="hidden">
                            <button type="button" onclick="document.getElementById('avatar-input').click()"
                                    class="px-4 py-2 text-sm bg-background dark:bg-background-dark border border-border dark:border-border-dark rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
                                Choose image
                            </button>
                        </div>
                    </div>
                </form>

                <!-- 主题外观设置 -->
                <div class="mb-6">
                    <h3 class="text-sm font-medium text-secondary mb-2">Theme Appearance</h3>
                    <div class="space-y-2">
                        <div class="flex items-center space-x-2">
                            <input type="radio" id="theme-light" name="theme-mode" value="light" 
                                   class="w-4 h-4 text-primary focus:ring-primary">
                            <label for="theme-light" class="text-sm">Light</label>
                        </div>
                        <div class="flex items-center space-x-2">
                            <input type="radio" id="theme-dark" name="theme-mode" value="dark" 
                                   class="w-4 h-4 text-primary focus:ring-primary">
                            <label for="theme-dark" class="text-sm">Dark</label>
                        </div>
                        <div class="flex items-center space-x-2">
                            <input type="radio" id="theme-system" name="theme-mode" value="system" 
                                   class="w-4 h-4 text-primary focus:ring-primary">
                            <label for="theme-system" class="text-sm">System</label>
                        </div>
                    </div>
                </div>
                
                <!-- 密码修改 -->
                <form id="password-form">
                    <h3 class="text-sm font-medium text-secondary mb-2">CHANGE PASSWORD</h3>
                    <div class="space-y-4">
                        <input type="password" id="current-password" placeholder="Current password" required
                               class="w-full px-4 py-2 bg-background dark:bg-background-dark border border-border dark:border-border-dark rounded-lg
                                      focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                        <input type="password" id="new-password" placeholder="New password" required
                               class="w-full px-4 py-2 bg-background dark:bg-background-dark border border-border dark:border-border-dark rounded-lg
                                      focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                        <button type="submit"
                                class="w-full bg-primary text-white py-2 rounded-lg hover:bg-primary/90 transition-colors">
                            Update password
                        </button>
                        <button type="button" id="settings-save-btn"
                                class="w-full mt-2 bg-background dark:bg-background-dark border border-border dark:border-border-dark text-secondary py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                            Save Settings
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 创建新标签模态框 -->
    <div id="create-tag-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
        <div class="bg-surface dark:bg-surface-dark rounded-lg shadow-xl max-w-sm w-full p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-medium">Create New Tag</h2>
                <button class="close-modal-btn text-secondary hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <form id="create-tag-form" class="space-y-4">
                <div>
                    <input type="text" id="new-tag-input" placeholder="Tag name" required 
                           class="w-full px-4 py-2 rounded-lg border border-border bg-background focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                </div>
                <div class="flex space-x-2">
                    <button type="submit" 
                            class="flex-1 bg-primary text-white py-2 rounded-lg hover:bg-primary/90 transition-colors">
                        Create Tag
                    </button>
                    <button type="button" class="close-modal-btn flex-1 bg-background dark:bg-background-dark border border-border dark:border-border-dark text-secondary py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="/static/js/script.js"></script>
</body>
</html>
